<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式</title>
    <script src="Myvue.js"></script>
</head>
<body>
<div id="app" >
    <!--    <p>{{ msg }}</p>
        <p>{{ age }}</p>
        <p>普通文本</p>
        <p>{{ obj.firstName }}</p>-->
    <p>1{{ obj.second.username }}</p>
</div>
</body>
<script>
    // 创建Myvue构造函数
    function Myvue(options) {
        this._data = options.data;
        this._el = options.el;
        this.$el = this._templateDOM = document.querySelector(this._el);
        this._parent = this._templateDOM.parentNode;
        this.render()
    }
    Myvue.prototype.render = function () {
        this.compiler()
    }
    Myvue.prototype.compiler = function () {
        // 拷贝原来的DOM元素赋值给新元素
        let realDOM = this._templateDOM.cloneNode(true);
        // 调用模拟插值表达式
        compiler(realDOM, this._data);
        this.update(realDOM)
    }
    Myvue.prototype.update = function (real) {
        //用新的元素替换原来的DOM元素
        this._parent.replaceChild(real, this.$el)
    }

    // Myvue构造函数实例化
    var vm = new Myvue({
        el: "#app",
        data: {
            msg: "yxx",
            age: 18,
            obj: {
                firstName: "zs",
                second: {
                    username: "lisi"
                }
            }
        }
    })

    // 模拟插值表达式:把{{ }}内的字符串替换为Myvue中data对象中的数据
    function compiler(el, data) {
        console.log(el)
        //正则表达式  .+匹配{{}}所有字符 ？取消贪婪  g全局
        let regulation = /\{\{(.+?)\}\}/g;

        let childEle = el.childNodes;
        console.log(childEle)
        for (var i = 0; i < childEle.length; i++) {
            let type = childEle[i].nodeType;
            //节点nodeType==1 为标签元素
            //节点nodeType==3 为文本元素
            if (type === 3) {
                let txt = childEle[i].nodeValue;
                console.log("childEle[i]",childEle[i])
                txt = txt.replace(regulation, function (_, val) {
                    // 此函数的第0个参数为匹配到的内容，例如 {{name}}
                    // 第n个参数为第n组内容，例如 name
                    let key = val.trim();
                    console.log("key",key)
                    //调用 对象嵌套函数
                    return getValueByPath(data, key);
                })
                childEle[i].nodeValue = txt;
            } else if (type === 1) {
                compiler(childEle[i], data)
            }
        }
    }


    // 解决 对象多层嵌套 得不到值的问题
    /* 例如这样的对象
    var obj={
        a:{
            b:{
                c:{
                    d:"hello vue"
                }
            }
        }
    }
    getValueByPath(obj,'a.b.c.d') 结果为 hello vue
    */
    function getValueByPath(obj, str) {
/*        console.log("obj",obj)
        console.log("str",str)*/

        let paths = str.split('.');
        //console.log("paths",paths)
        // 定义变量把对象的值赋给它
        let res = obj;
        //console.log("res",res)

        //定义变量  让他等于删除数组中第一个元素
        let prop;

        // shift() 删除数组中第一个元素，返回值为删除的元素
        while (prop = paths.shift()) {
            //循环获取 下一层获取对象元素 的值  obj.second.username
            res = res[prop]
            //console.log("prop =",prop,",res =",res)
        }

        return res
    }

</script>
</html>
